<template>
    <div class="common" v-loading="loading">
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/admin/user' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>{{menu}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="backbutton" v-show="bbshow">
                <el-button plain @click="cancelButton()">返回</el-button>
            </div>
        </div>
        <div class="meta-divder"></div>

        <el-row v-show="showBox === 'search'">
            <el-row class="wdh-search">
                <el-col :span="4">
                    <el-button  type="primary" @click="openUserEdit()">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                        <span style="margin-left:3px">新增用户</span>   
                    </el-button>
                </el-col>
                <el-col :span="20">
                    <el-row type="flex" :gutter="5" justify="end">
                        <el-col :span="4">
                            <el-select v-model="searchParams.role_id" clearable placeholder="请选择角色">
                                <el-option v-for="v in roleList" :key="v.id" :label="v.role_name" :value="v.id"></el-option>
                            </el-select>
                        </el-col>

                        <el-col :span="4">
                            <el-input v-model="searchParams.username"  placeholder="输入用户账号" clearable></el-input>
                        </el-col>                
                        <el-button-group class="wdh-search-button">
                            <el-button type="primary" icon="el-icon-search" @click="goSearch(1)"></el-button>
                            <el-button icon="el-icon-refresh" @click="goSearch(2)"></el-button>
                        </el-button-group>
                    </el-row>
                </el-col>
            </el-row>
            <!--员工列表-->

            <el-row class="wdh-table">
                <el-table :data="userList" style="width: 100%;">
                    <el-table-column prop="username" label="账号" width="120" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="nickname" label="昵称" width="150" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="role_name" label="角色" width="150" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="mobile" label="联系方式" width="150" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="status" label="启用/禁用" width="150" header-align="center" align="center">                 
                        <template  slot-scope="scope">
                            <el-switch
                                v-model="scope.row.status"
                                name="status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="2"
                                @change="changeStatus(scope.row)">
                            </el-switch>                             
                        </template>
                    <!--   
                        <span v-if="scope.row.status==1" style="color:green;font-size:13px">启用</span>
                        <span v-else style="color:red;font-size:13px">禁用</span>
                        
                    -->
                    </el-table-column>
                    <el-table-column prop="created_at" label="注册时间" header-align="center" align="center"></el-table-column>
                 
                    <el-table-column fixed="right" label="操作" width="160" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-row class="operation-btn">
                                    <el-button type="text" size="small" title="编辑" @click="openUserEdit(scope.row)">
                                        <i class="fa fa-pencil" aria-hidden="true" style="color:#409eff"></i>
                                    </el-button>
                                    <el-button type="text" size="small" title="删除" @click="del(scope.row.id)">
                                        <i class="fa fa-trash" aria-hidden="true" style="color:#ff4d4f"></i>
                                    </el-button>                           
                                </el-row>
                            </template>

                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.current_page"
                    :page-sizes="pagination.page_sizes"
                    :page-size="pagination.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
                    </el-pagination>
                </div>
                                     
            </el-row>
        </el-row>
        
        <!--新增/编辑-->
        <el-row class="wdh-edit" v-show="showBox === 'edit'">

            <el-form ref="editForm" :model="editForm" label-width="110px" class="wdh-edit-content">
                <el-input v-model="editForm.id" v-show="false"></el-input>
                <el-form-item label="账号" prop="username">
                    <el-col :span="6">
                        <el-input v-model="editForm.username" placeholder="请填写个人账号" :disabled="editForm.id > 0 ? true : false"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-col :span="6">
                        <el-input v-model="editForm.nickname" placeholder="请填写账号昵称"></el-input>
                    </el-col>
                </el-form-item>

                <el-row v-show="editForm.pwd_show">
                    <el-form-item label="登录密码" prop="pwd">
                        <el-col :span="6">
                            <el-input type="password" v-model="editForm.pwd" placeholder="请设置登录密码"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirm_pwd">
                        <el-col :span="6">
                            <el-input type="password" v-model="editForm.confirm_pwd" placeholder="请再次输入登录密码"></el-input>
                        </el-col>
                    </el-form-item>
                </el-row>
             
                <el-form-item label="性别" prop="sexy">
                    <el-radio-group v-model="editForm.sexy">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="2">女</el-radio>
                        <el-radio :label="3">保密</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="头像" prop="mobile">
                    <div class="de-body">
                        <div class="de-img upimg">                            
                            <el-upload
                                :data="upload"
                                class="avatar-uploader"
                                action="/components/upload"
                                :show-file-list="false"
                                :on-success="headPicUploadSuccess">
                                <img v-if="editForm.head_pic" :src="editForm.head_pic" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>

                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/dog.png" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>

                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/cheng.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>
                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/huang.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>
                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/lv.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>
                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/mei.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>

                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/huo.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>

                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/apple.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>

                        <div class="de-img">
                            <a href="javascript:;" @click="changePic($event)">
                                <img src="/images/user/li.jpg" alt="">
                                <div class="img-radio">
                                    <i class="fa fa-check dis" aria-hidden="true"></i>
                                </div>
                            </a>
                        </div>

                    </div>
                    
                </el-form-item>

                <el-form-item label="角色" prop="role_id">
                    <el-select v-model="editForm.role_id" clearable placeholder="请选择角色">
                        <el-option v-for="v in roleList" :key="v.id" :label="v.role_name" :value="v.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="手机" prop="mobile">
                    <el-col :span="6">
                        <el-input v-model="editForm.mobile" placeholder="请填写手机号"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-col :span="8">
                        <el-input v-model="editForm.email" placeholder="请填写个人邮箱"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="个人简介" prop="desc">
                    <el-col :span="10">
                        <el-input type="textarea" :rows="2" placeholder="请填写一句话个人简介" v-model="editForm.desc" maxlength="50" show-word-limit>
                        </el-input>

                    </el-col>
                </el-form-item>

            </el-form>
            <div class="common-button">
                <el-button plain @click="cancelButton()">取消</el-button>
                <el-button type="primary" @click="submitButton">保存</el-button>
            </div>
        </el-row>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loading:true,
                bbshow:false,
                menu:'用户列表',
                showBox: 'search',
                searchParams: {
                    role_id: '',
                    username: '',
                },              
                userList: [],
                roleList:[],
                pagination: {
                    current_page: 1,
                    page_sizes: [10, 20, 30, 40],
                    limit: 10,
                    total: 0
                },

                upload: {
                    _token: window.csrf_token,
                },

                //编辑、新增
                editForm: {
                    id: 0,
                    username: '',
                    nickname: '',
                    pwd_show: 1,
                    pwd: '',
                    confirm_pwd: '',
                    sexy: 3,
                    head_pic:'/images/user/dog.png',                                 
                    role_id: '',
                    mobile: '',              
                    email: '',
                    desc: '',
                },

            
            }
        },
        created(){
            this.getUserList();
            this.getRoleList();

        },
        mounted(){
    

        },
        methods: {

            //获取用户数据列表
            getUserList(pagination){
                if (pagination) {
                    this.pagination.current_page = pagination.current_page;
                    this.pagination.limit = pagination.limit;
                }

                let dt = {
                    params: {
                        page: this.pagination.current_page,
                        limit: this.pagination.limit,
                        role_id: this.searchParams.role_id,
                        username: this.searchParams.username
                    }
                };

                window.axios.get('/api/user/list',dt).then((res) => {
                    this.loading = false;
                    if (res.data.code == 200) {
                        
                        this.userList = res.data.data.data;
                        console.log(this.userList);
                        this.pagination.total = res.data.data.total;
                        this.pagination.current_page = res.data.data.current_page;
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            },

            //获取角色数据列表
            getRoleList(){
                window.axios.get('/api/role/roleArr').then((res) => {           
                    if (res.data.code == 200) {
                        this.roleList = res.data.data;
                    } else {
                        this.$message(res.data.msg);
                    }
                });
            },

            //禁用/启用
            changeStatus(row){
                //row.status == 1?2:1;        
                let data = {
                    'id':row.id,
                    'status':row.status
                };
                console.log(row);
                window.axios.put('/api/user/status',data).then((res) => {
                    
                    this.$message(res.data.msg);
                });
                
            },

            //软删除
            del(id){
                let data = {'id':id,'status':3};
                this.$confirm('确定删除此账号！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.axios.put('/api/user/status',data).then((res) => {
                        if(res.data.code ==200){
                            this.$message({
                            type: 'success',
                            message: '删除成功!'
                            });

                            this.getUserList();
                        }else{
                           this.$message(res.data.msg); 
                        }
                    });
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },

            //搜索
            goSearch(val){
                if(val == 2){
                    this.searchParams.role_id = '';
                    this.searchParams.username = '';
                }
                
                this.pagination.paging = 1;
                this.getUserList();
                
            },

            //打开新增编辑窗口
            openUserEdit(row) {
                this.bbshow = true;
                //console.log(row);
                if (row) {
                    this.menu ='用户信息修改';
                    this.editForm = {
                        id: row.id,
                        username:row.username,
                        nickname: row.nickname,
                        sexy: Number(row.sexy),
                        role_id: Number(row.role_id),
                        mobile: row.mobile,
                        pwd_show: 0,
                        email:row.email,
                        head_pic: row.head_pic,
                        desc: row.desc,
                    };   
                }else{
                    this.menu ='新增用户';
                    $('.fa-check').eq(0).removeClass('dis');
                }
                        
                this.$refs.editForm.clearValidate();
                this.showBox = 'edit';

            },
            headPicUploadSuccess(row) {
                if (row.code === 200) {
                    this.editForm.head_pic = row.data.url;
                } else {
                    this.$message.error(row.message);
                }
            },

            //取消操作
            cancelButton(){
                this.editForm = {
                    id: 0,
                    username: '',
                    nickname: '',
                    pwd_show: 1,
                    pwd: '',
                    confirm_pwd: '',
                    sexy: 3,
                    head_pic:'/images/user/dog.png',                                 
                    role_id: '',
                    mobile: '',              
                    email: '',
                    adress: '',
                    
                };
                this.$refs.editForm.clearValidate();
                this.showBox = 'search';
                this.bbshow = false;
                $('.fa-check').addClass('dis');
            },

            //保存操作
            submitButton(){
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.loading = true; 
                        //添加
                        let url = '/api/user/save';
                        if(this.editForm.pwd_show == 0){
                            url = '/api/user/update';
                        }
                                         
                        window.axios.post(url, this.editForm).then((res) => {
                            this.loading = false;
                            //console.log(res);
                            if (res.data.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '保存成功'
                                });
                                
                                this.cancelButton();
                                this.getUserList();
                                /*
                                if (this.editForm.id === 0) {
                                    this.goSearch(1);
                                } else {
                                    this.search();
                                }
                                */
                            } else {
                                this.$message.error(res.data.message);
                            }
                        }).catch((error) => {
                            this.loading = false;
                            this.$message.error('保存失败，错误信息：' + error);
                        });
                    }
                });
            },
            //选择每页显示多少条
            handleSizeChange(val){
                this.pagination.limit = val;
                this.getUserList(this.pagination);
                
            },
            handleCurrentChange(val) {
                this.pagination.current_page = val;
                this.getUserList(this.pagination);
            },
            changePic(ev){
     
                if($(ev.currentTarget).find('.fa-check').css("display") == 'none'){
                    $('.fa-check').addClass('dis');
                    $(ev.currentTarget).find('.fa-check').removeClass('dis');

                    let pic_path = $(ev.currentTarget).find('img').attr("src");
                    this.editForm.head_pic = pic_path;

                }else{
                    
                    $(ev.currentTarget).find('.fa-check').addClass('dis');
                }

            }


        },
    }
</script>
<style>

    .common{     
        border-radius: 10px;
        background: #fff;
        margin: 10px;
        box-shadow: 1px 3px 7px 0 rgb(12 64 168 / 20%);
    }

    .breadcrumb{
        padding:20px;
        color:#666;
    }
    .backbutton{
        position: relative;
        float: right;
        top: -25px;
        right: 50px;
    }
    
    .is-link{
        color:#666!important;
    }
    .el-breadcrumb__item:hover  .is-link{
        color:#409EFF!important;
    }
    .meta-divder{
        font-weight: 400;
        font-size: 1rem;
        border-top: 1px solid #d3e0e9;
        border-bottom: 1px solid rgba(211,224,233,.15);
        margin: 1rem 0;
        line-height: 1;
        margin:0 20px;
    }
    .common-button{
        margin-bottom: 25px;
        background-color: #f2f7fa;
        width: 100%;
        text-align: center;
        height: 50px;
    }
    .page{
        float:right;
        margin-top: 10px;
    }

    .de-body{
        height:80px;
        width:100%;
    }

    .de-img{
        padding:5px;
        display:inline-block;
    }

    .de-img img{
        width:70px;
        height:70px;
        float: left;
    }
    .img-radio{
        width:12px;
        height:12px;
        background: #fff;
        border:1px solid #666;
        position: absolute;
        margin-left: 56px;
    }

    .fa-check{
        color:red;
        position: absolute;
    }
    .dis{
        display:none;
    }
    .upimg{
        border:1px solid red;
        margin-right:110px;
        width: 70px;
        height: 70px;
    }
   
    
</style>